@font-face {
  font-family: 'iconfont';
  src: url('//s.qunarzz.com/qtalk-web/0.0.8/qtalk_web.eot'); /* IE9*/
  src: url('//s.qunarzz.com/qtalk-web/0.0.8/qtalk_web.woff') format('woff'), /* chrome、firefox */
  url('//s.qunarzz.com/qtalk-web/0.0.8/qtalk_web.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//s.qunarzz.com/qtalk-web/0.0.8/qtalk_web.svg#iconfont') format('svg'); /* iOS 4.1- */
}
// ../../../../assets/images/
.icon {
  background: url(../../../../assets/index/c463d610f0e32702.png) no-repeat;
  background-size: 487px 462px;
  display: inline-block;
  vertical-align: middle;

  // 全局
  &.close {
    background-position: -150px -432px;
    width: 25px;
    height: 25px;
  }

  &.close-1 {
    background-position: -249px -436px;
    width: 14px;
    height: 14px;
  }

  &.sex-1, &.sex-2 {
    width: 16px;
    height: 16px;
    background-position: -384px -304px;
  }
  &.sex-2 {
    background-position: -368px -304px;
  }

  &.checked {
    background-position: -331px -432px;
    width: 20px;
    height: 20px;
    &.on {
      background-position: -467px -330px;
    }
  }

  &.arrow-down {
    background-position: -477px -65px;
    width: 10px;
    height: 10px;
  }

  &.arrow-up {
    background-position: -477px -55px;
    width: 10px;
    height: 10px;
  }

  // #panel
  &.panel-menu {
    width: 30px;
    height: 30px;
    background-position: -434px -398px;
  }

  &.panel-search {
    position: absolute;
    top: 1px;
    width: 30px;
    height: 30px;
    background-position: -60px -432px;
  }

  &.panel-chat {
    width: 35px;
    height: 35px;
    background-position: -150px -96px;

    &.active {
      background-position: -185px -96px;
    }
  }

  &.panel-friends {
    width: 35px;
    height: 35px;
    background-position: -220px -96px;

    &.active {
      background-position: -304px -246px;
    }
  }

  &.panel-reddot {
    position: absolute;
    top: -6px;
    right: -6px;
    color: #fff;
    font-style: normal;
    font-size: 12px;
    text-align: center;
    background-position: -451px -380px;
    width: 22px;
    height: 16px;
  }

  // #chat
  &.chat-header-members-add {
    background-position: -422px -55px;
    width: 55px;
    height: 55px;
  }

  &.chat-message-empty-logo {
    background-position: -96px -150px;
    width: 100px;
    height: 94px;
    opacity: 0.5;
  }

  &.chat-footer-face {
    background-position: -404px -398px;
    width: 30px;
    height: 30px;
  }

  &.chat-footer-file {
    background-position: -120px -432px;
    width: 30px;
    height: 30px;
  }

  &.add-user-search {
    background-position: -90px -432px;
    width: 30px;
    height: 30px;
  }
  &.owner {
    background-position: -372px -433px;
    width: 15px;
    height: 24px;
  }
  &.admin {
    background-position: -357px -433px;
    width: 15px;
    height: 24px;
  }
  &.arrow-d {
    background-position: -393px -440px;
    width: 10px;
    height: 10px;
  }
  &.arrow-r {
    background-position: -407px -440px;
    width: 10px;
    height: 10px;
  }
  &.card-chat {
    width: 22px;
    height: 22px;
    background-position: -223px -432px;
  }
  &.male {
    width: 24px;
    height: 24px;
    margin-left: 5px;
    background-position: -246px -356px;
  }
  &.female {
    width: 24px;
    height: 24px;
    margin-left: 5px;
    background-position: -246px -380px;
  }
  &.people3 {
    width: 32px;
    height: 24px;
    margin-right: 5px;
    background-position: -243px -333px;
  }
}
.iconfont{
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;

  &.small {
    font-size: 16px;
  }
  &.large {
    font-size: 24px;
  }
  &.x-large {
    font-size: 28px;
  }
  &.huge {
    font-size: 32px;
  }

  &.camel:before {
    content: '\f3eb';
  }
  &.double-arrow-up:before {
    content: '\e044';
  }
  &.double-arrow-down:before {
    content: '\e043';
  }
  &.nike:before {
    content: '\f3f6';
  }
  &.nike2:before {
    content: '\f472';
  }
  &.circle:before {
    content: '\f438';
  }
  &.plus:before {
    content: '\f016';
  }
  &.more:before {
    content: '\e1ba';
  }
  &.search:before {
    content: '\f3b9';
  }
  &.message:before {
    content: '\f3e4';
  }
  &.message-empty:before {
    content: '\f0f3';
  }
  &.card:before {
    content: '\f4ce';
  }
  &.card-empty:before {
    content: '\f0de';
  }
  &.logout:before {
    content: '\f1bb';
  }
  &.people:before {
    content: '\f4c6';
  }
  &.smile:before {
    content: '\f3be';
  }
  &.folder:before {
    content: '\e211';
  }
  &.people3:before {
    content: '\f10f';
  }
  &.arrow-up:before {
    content: '\f3ca';
  }
  &.arrow-down:before {
    content: '\f3cb';
  }
  &.arrow-left:before {
    content: '\f3cd';
  }
  &.arrow-right:before {
    content: '\f3cc';
  }
  &.mail:before {
    content: '\f493';
  }
  &.female:before {
    content: '\f478';
  }
  &.male:before {
    content: '\f47c';
  }
  &.edit:before {
    content: '\f4cb';
  }
  &.empty:before {
    content: '\f0f4';
  }
  &.clock:before {
    content: '\e158';
  }
  &.tebu:before {
    content: '\f093';
  }
  &.minus:before {
    content: '\f436';
  }
}
